import React from "react";
import {connect} from 'dva';
import {Alert, Button, Card, Form, Icon, Input} from 'antd';
import Link from 'umi/link';
import styles from './Login.less';

const FormItem = Form.Item;

@connect(({userModel}) => ({
    userModel
}))
class Login extends React.Component {

    state = {
        //-- 加载层
        loading: false,
    };

    handleLoginSubmit = (e) => {
        e.preventDefault();
        const {form, dispatch} = this.props;
        let userInfo = this.props.form.getFieldsValue();
        form.validateFields((err, values) => {
            if (!err) {
                this.setState({loading: true});
                console.log(userInfo);
                dispatch({
                    type: 'login/login',
                    payload: userInfo,
                });
            }
        });
    }

    renderMessage = content => {
        return (<Alert
            style={{marginBottom: 24}}
            message={content}
            type={"error"}
            showIcon
        />);
    }

    render() {
        const {getFieldDecorator} = this.props.form;

        const {loading} = this.state;

        return (
            <div className={styles.main}>
                <Card className={styles.card}>
                    {false ? this.renderMessage('账户或密码错误') : null}
                    <Form onSubmit={this.handleLoginSubmit}>
                        <FormItem>
                            {
                                getFieldDecorator('username',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                whitespace: true,
                                                message: '请输入账户!'
                                            }
                                        ]
                                    }
                                )(
                                    <Input size={'large'} prefix={<Icon type={'user'}/>} placeholder={'请输入账号'}/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('password',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                whitespace: true,
                                                message: '请输入密码!'
                                            },
                                        ],
                                        //下面这个函数可以直接把其他字符过滤掉，无法输入到上面
                                        // getValueFromEvent: (event) => {
                                        //     return event.target.value.replace(/\D/g, '')
                                        // },
                                    },
                                )(
                                    <Input.Password size={'large'} prefix={<Icon type={'lock'}/>}
                                                    placeholder={'请输入密码'}/>
                                )
                            }
                        </FormItem>
                        <FormItem>
                            <Button size={'large'} className={styles.submit} type={'primary'}
                                    htmlType={'submit'}>马上登录</Button>
                        </FormItem>
                        <p style={{textAlign: 'center'}}>
                            <Link to={'/user/register'}>
                                注册运营商
                            </Link>
                        </p>
                    </Form>
                </Card>
            </div>
        );
    }

}

export default Form.create()(Login);
